<template>
	<div class="not-found-container">
		<!-- 使用 Element Plus 的图片容器 -->
		<el-empty description=" " :image="notFoundImage" :image-size="400">
			<template #description>
				<div class="text-container">
					<h1 class="title">不好意思，您不在登录状态~</h1>
					<p class="tip">
						将在 {{ countdown }} 秒后自动跳转到登陆页面
						<router-link to="/login" class="link">立即登录</router-link>
					</p>
				</div>
			</template>
		</el-empty>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import notFoundImage from '@/assets/401.png'

	const router = useRouter()
	const countdown = ref(5)

	let timer = null

	// 倒计时逻辑
	const startCountdown = () => {
		timer = setInterval(() => {
			if (countdown.value > 0) {
				countdown.value--
			} else {
				clearInterval(timer)
				router.push('/login')
			}
		}, 1000)
	}

	onMounted(() => {
		startCountdown()
	})

	onBeforeUnmount(() => {
		clearInterval(timer)
	})
</script>

<style scoped>
	.not-found-container {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f5f7fa;
	}

	.text-container {
		text-align: center;
	}

	.title {
		font-size: 24px;
		color: #666;
		margin-bottom: 20px;
	}

	.tip {
		font-size: px;
		color: #909399;
	}

	.link {
		color: #409eff;
		text-decoration: none;
		margin-left: 5px;
	}

	.link:hover {
		text-decoration: underline;
	}
</style>